import { useState } from "react"
import { motion } from 'framer-motion'
import { LoginTabKeyEnums } from "@/enums"

import LoginWraper from "./components/LoginWraper"
import RegisterWraper from "./components/RegisterWraper"

export default function Login() {
  const [tabKey, setTabKey] = useState<LoginTabKeyEnums>(LoginTabKeyEnums.Login)

  function onTabTap(e: LoginTabKeyEnums) {
    setTabKey(e);
  }


  return (
    <div className="w-[inherit] h-[inherit] flex">
      <div className="flex-grow bg-slate-600 text-white">
        left
      </div>
      <div className="min-w-[300px] max-w-[500px] w-[460px] p-[40px] flex flex-col items-center">
        <div className="w-full">
          <motion.div
            key={tabKey}
            initial={{ opacity: 0, translateX: -50 }}
            animate={{ opacity: 1, translateX: 0 }}>
            {
              tabKey == LoginTabKeyEnums.Login ? 
              <LoginWraper onChange={onTabTap} /> : 
              <RegisterWraper onChange={onTabTap} />
            }
          </motion.div>
        </div>
      </div>
    </div>
  )
}